import '../../public.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();
  String? account;
  String? password;
  void login() {
    final loginForm = formKey.currentState;
    if (loginForm!.validate()) {
      loginForm.save();
      StorageManager.setItem('token', '${account}_$password');
      RouterHelper.navigator.pushReplacementNamed(Routers.main);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          wellCome(context),
          Form(
            key: formKey,
            child: Column(
              children: [
                accountItem(context),
                passwordItem(context),
                Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 15,
                    vertical: 30,
                  ),
                  child: GestureDetector(
                    onTap: () {
                      RouterHelper.navigator.pushNamed(Routers.regist);
                    },
                    child: const Text(
                      "Not registered yet? Sign up",
                      style: TextStyle(
                        color: Colors.blue,
                        decoration: TextDecoration.underline,
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 20),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 30),
                  child: TextButton(
                    onPressed: login,
                    style: ButtonStyle(
                      shape: WidgetStateProperty.all(
                        RoundedRectangleBorder(
                          side: BorderSide(
                            width: 0.5,
                            color: HexColor('#E95541'),
                          ),
                          borderRadius: BorderRadius.circular(40),
                        ),
                      ),
                      backgroundColor: WidgetStateProperty.all(
                        HexColor('#E95541'),
                      ),
                    ),
                    child: Container(
                      height: 44,
                      alignment: Alignment.center,
                      child: const Text(
                        'Sign in',
                        style: TextStyle(color: Colors.white, fontSize: 16),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget wellCome(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(30),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(height: 30),
          const Text(
            'Sign in',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.w500,
              color: Color(0xFF777777),
            ),
          ),
          const SizedBox(height: 20),
          Row(
            children: [
              Image.asset('images/logo.png', width: 40, height: 40),
              const SizedBox(width: 15),
              const Expanded(
                child: Text(
                  'CNACCOUNT',
                  style: TextStyle(
                    fontSize: 32,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF333333),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 30),
        ],
      ),
    );
  }

  Widget accountItem(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 12),
      child: Row(
        children: [
          Expanded(
            child: TextFormField(
              keyboardAppearance: Brightness.light,
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.digitsOnly,
              ],
              // 键盘回车键
              keyboardType: TextInputType.number,
              cursorWidth: 1.5,
              cursorColor: const Color.fromRGBO(51, 51, 51, 1),
              validator: (value) {
                if (value == "") {
                  return "Please enter your mobile phone number";
                }
                return null;
              },
              onSaved: (newValue) => account = newValue,
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.symmetric(
                  vertical: 15,
                  horizontal: 10,
                ),
                hintText: "Enter your mobile phone number",
                labelText: "Mobile",
                hintStyle: TextStyle(color: Colors.grey[400]),
                enabledBorder: const UnderlineInputBorder(
                  borderSide: BorderSide(color: Color(0xffeeeeee)),
                ),
                focusedBorder: const UnderlineInputBorder(
                  borderSide: BorderSide(color: Color(0xffeeeeee)),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget passwordItem(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 12),
      child: Row(
        children: [
          Expanded(
            child: TextFormField(
              obscureText: true,
              keyboardAppearance: Brightness.light,
              keyboardType: TextInputType.text,
              validator: (value) {
                if (value == "") {
                  return 'Enter password';
                }
                return null;
              },
              onSaved: (value) => password = value,
              cursorWidth: 1.5,
              cursorColor: const Color.fromRGBO(51, 51, 51, 1),
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.symmetric(
                  vertical: 15,
                  horizontal: 10,
                ),
                hintText: "Please enter you password",
                labelText: "Password",
                hintStyle: TextStyle(color: Colors.grey[400]),
                enabledBorder: const UnderlineInputBorder(
                  borderSide: BorderSide(color: Color(0xffeeeeee)),
                ),
                focusedBorder: const UnderlineInputBorder(
                  borderSide: BorderSide(color: Color(0xffeeeeee)),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
